<%@ include file="/common.jsp" %>
<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>操作员管理</title>
</head>
<body>

<div class="container mt-5">

    <table class="table">
        <thead>
        <tr>
            <th>操作员编号</th>
            <th>工作区域</th>
            <th>仓库编号</th>
            <th>员工身份证号</th>
            <th>部门编号</th>
        </tr>
        </thead>
        <tbody id="operatorTableBody">
        <!-- 表格内容将动态填充 -->
        </tbody>
    </table>

    <!-- 分页按钮 -->
    <div class="d-flex justify-content-between">
        <button class="btn btn-secondary" id="prevPageBtn">&lt; 上一页</button>
        <button class="btn btn-secondary" id="nextPageBtn">下一页 &gt;</button>
    </div>
</div>

<!-- 添加操作员模态框 -->
<div class="modal fade" id="addOperatorModal" tabindex="-1" role="dialog" aria-labelledby="addOperatorModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addOperatorModalLabel">添加操作员</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 添加操作员表单 -->
                <form id="addOperatorForm">
                    <div class="form-group">
                        <label for="operatorID">操作员编号</label>
                        <input type="text" class="form-control" id="operatorID" name="operatorID" required>
                    </div>
                    <div class="form-group">
                        <label for="workArea">工作区域</label>
                        <input type="text" class="form-control" id="workArea" name="workArea" required>
                    </div>
                    <div class="form-group">
                        <label for="warehouseNumber">仓库编号</label>
                        <input type="text" class="form-control" id="warehouseNumber" name="warehouseNumber" required>
                    </div>
                    <div class="form-group">
                        <label for="idNumber">员工身份证号</label>
                        <input type="text" class="form-control" id="idNumber" name="idNumber" required>
                    </div>
                    <div class="form-group">
                        <label for="departmentID">部门编号</label>
                        <input type="text" class="form-control" id="departmentID" name="departmentID" required>
                    </div>
                    <button type="submit" class="btn btn-primary">添加</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 编辑操作员模态框 -->
<div class="modal fade" id="editOperatorModal" tabindex="-1" role="dialog" aria-labelledby="editOperatorModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editOperatorModalLabel">编辑操作员</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 编辑操作员表单 -->
                <form id="editOperatorForm">
                    <input type="hidden" id="editOperatorID" name="operatorID">
                    <div class="form-group">
                        <label for="editWorkArea">工作区域</label>
                        <input type="text" class="form-control" id="editWorkArea" name="workArea" required>
                    </div>
                    <div class="form-group">
                        <label for="editWarehouseNumber">仓库编号</label>
                        <input type="text" class="form-control" id="editWarehouseNumber" name="warehouseNumber" required>
                    </div>
                    <div class="form-group">
                        <label for="editIDNumber">员工身份证号</label>
                        <input type="text" class="form-control" id="editIDNumber" name="idNumber" required>
                    </div>
                    <div class="form-group">
                        <label for="editDepartmentID">部门编号</label>
                        <input type="text" class="form-control" id="editDepartmentID" name="departmentID" required>
                    </div>
                    <button type="submit" class="btn btn-primary">保存修改</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        // 初始化页面数据
        getAllOperators();

        // 提交添加操作员表单
        $('#addOperatorForm').submit(function (event) {
            event.preventDefault();
            addOperator();
        });

        // 提交编辑操作员表单
        $('#editOperatorForm').submit(function (event) {
            event.preventDefault();
            editOperator();
        });

        // 上一页按钮点击事件
        $('#prevPageBtn').click(function () {
            getAllOperators(currentPage - 1);
        });

        // 下一页按钮点击事件
        $('#nextPageBtn').click(function () {
            getAllOperators(currentPage + 1);
        });
    });

    // 添加操作员
    function addOperator() {
        $.ajax({
            type: 'POST',
            url: '${pageContext.request.contextPath}/operator?operation=addOperator',
            data: $('#addOperatorForm').serialize(),
            success: function (response) {
                getAllOperators();
                $('#addOperatorModal').modal('hide');
            },
            error: function () {
                alert('Error: Unable to add operator.');
            }
        });
    }

    // 编辑操作员
    function editOperator() {
        $.ajax({
            type: 'POST',
            url: '${pageContext.request.contextPath}/operator?operation=updateOperator',
            data: $('#editOperatorForm').serialize(),
            success: function (response) {
                getAllOperators();
                $('#editOperatorModal').modal('hide');
            },
            error: function () {
                alert('Error: Unable to update operator.');
            }
        });
    }

    // 显示编辑操作员模态框
    function showEditModal(operatorID) {
        // 获取操作员信息并填充编辑表单
        $.ajax({
            type: 'GET',
            url: '${pageContext.request.contextPath}/operator?operation=getOperatorById&operatorID=' + operatorID,
            success: function (response) {
                var operator = response.data;
                $('#editOperatorID').val(operator.operatorID);
                $('#editWorkArea').val(operator.workArea);
                $('#editWarehouseNumber').val(operator.warehouseNumber);
                $('#editIDNumber').val(operator.idNumber);
                $('#editDepartmentID').val(operator.departmentID);
                $('#editOperatorModal').modal('show');
            },
            error: function () {
                alert('Error: Unable to fetch operator data.');
            }
        });
    }

    // 删除操作员
    function deleteOperator(operatorID) {
        if (confirm('确定要删除这个操作员吗？')) {
            $.ajax({
                type: 'POST',
                url: '${pageContext.request.contextPath}/operator?operation=deleteOperator',
                data: {operatorID: operatorID},
                success: function (response) {
                    getAllOperators();
                },
                error: function () {
                    alert('Error: Unable to delete operator.');
                }
            });
        }
    }

    // 当前页码
    var currentPage = 1;
    // 每页显示数量
    var pageSize = 10;

    // 获取所有操作员信息
    function getAllOperators(page) {
        if (page === undefined || page < 1) {
            page = 1;
        }
        currentPage = page;

        $.ajax({
            type: 'GET',
            url: '${pageContext.request.contextPath}/operator?operation=getOperatorsByPage&start=' + page + '&pageSize=' + pageSize,
            success: function (response) {
                var operators = response.data;
                var tableBody = $('#operatorTableBody');
                tableBody.empty();

                operators.forEach(function (operator) {
                    var row = '<tr>' +
                        '<td>' + operator.operatorID + '</td>' +
                        '<td>' + operator.workArea + '</td>' +
                        '<td>' + operator.warehouseNumber + '</td>' +
                        '<td>' + operator.idNumber + '</td>' +
                        '<td>' + operator.departmentID + '</td>' +
                        '</tr>';
                    tableBody.append(row);
                });
            },
            error: function () {
                alert('Error: Unable to fetch operators.');
            }
        });
    }
    // 手动移除模态框隐藏时的背景遮罩，防止黑色阴影
    $('#addOperatorModal, #editOperatorModal').on('hidden.bs.modal', function () {
        $('.modal-backdrop').remove();
    });
</script>

</body>
</html>
